<template>
	<view class="container">
		<view v-if="LoginShow">
			<view class="top-image">
				<image src="/static/images/login-bg.jpg" mode="aspectFill" class="image"></image>
			</view>
			<view class="form-container">
				<view class="formTitle">欢迎回来</view>
				<view class="form-box">
					<!-- 用户名输入框 -->
					<view class="input-box">
						<text class="form-text">账号</text>
						<input class="input" type="text" v-model="username" placeholder="请输入用户名"
							placeholder-class="placeholder" />
					</view>

					<!-- 密码输入框 -->
					<view class="input-box">
						<text class="form-text">密码</text>
						<!-- <wd-input v-model="value" clearable show-password @change="handleChange"/> -->
						<input class="input" type="password" v-model="password" placeholder="请输入密码"
							placeholder-class="placeholder" />
					</view>

					<!-- 忘记密码 -->
					<view class="forget-password" @click="handleForgetPassword">忘记密码?</view>

					<!-- 登录按钮 -->
					<button class="login-btn" :disabled="!agreed" :class="{ disabled: !agreed }" @click="handleLogin">
						登录
					</button>
					<!-- 分割线 -->
					<wd-divider class="divider">or</wd-divider>
					<!-- 其他登录按钮 -->
					<button class="other-login-btn" @click="handleOtherLogin">
						<image src="/static/images/login.png" />
						LINE一鍵登陸
					</button>
				</view>

				<!-- 协议勾选 -->
				<view class="agreement-box">
					<checkbox-group @change="handleAgreementChange">
						<label class="agreement-label">
							<checkbox value="agree" :checked="agreed" class="round-checkbox" />
							<text class="agreement-text">我已阅读并同意</text>
							<text class="agreement-link" @click.stop="handleViewAgreement">《用户协议》</text>
							<text class="agreement-text">和</text>
							<text class="agreement-link" @click.stop="handleViewPrivacy">《隐私政策》</text>
						</label>
					</checkbox-group>
				</view>
			</view>
		</view>
		<view class="loading-container" v-else>
			<text>正在跳转到 LINE 登录...</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		httpGet,
		httpPost
	} from '@/utils/http'
	const username = ref('')
	const password = ref('')
	const agreed = ref(false)
	const LoginShow = ref(false)
	onMounted(async () => {
		await getLogin()
	})
	const handleLogin = () => {
		if (!username.value) {
			uni.showToast({
				title: '请输入账号',
				icon: 'none',
			})
			return
		}
		if (!password.value) {
			uni.showToast({
				title: '请输入密码',
				icon: 'none',
			})
			return
		}
		if (!agreed.value) {
			uni.showToast({
				title: '请先同意协议',
				icon: 'none',
			})
			return
		}

		uni.showToast({
			title: '登录中...',
			icon: 'loading',
		})

		setTimeout(() => {
			// uni.hideToastLoading()
			uni.showToast({
				title: '登录成功',
				icon: 'success',
			})
			uni.reLaunch({
				url: '/pages/index/index',
			})
		}, 1500)
	}

	const handleForgetPassword = () => {
		uni.navigateTo({
			url: '/pages/forget-password/forget-password',
		})
	}

	const handleAgreementChange = (e) => {
		agreed.value = e.detail.value.includes('agree')
	}

	const handleViewAgreement = () => {}

	const handleViewPrivacy = () => {
		uni.navigateTo({
			url: '/pages/agreement/privacy',
		})
	}

	const handleOtherLogin = async () => {
		// 其他登录方式逻辑
		await getLogin()
	}
	const getLogin = async () => {
		try {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			const response = await httpGet('/miniapp/login/')
			const loginUrl = response.data.login_url
			if (process.env.VUE_APP_PLATFORM === 'h5') {
				window.location.href = loginUrl
			} else {
				// 其他平台的跳转方式
				uni.navigateTo({
					url: loginUrl
				})
			}
		} catch (error) {
			console.log(error);
			uni.showToast({
				title: '请求失败，请稍后重试',
				icon: 'none',
				duration: 2000
			});
		} finally {
			uni.hideLoading();
		}
	}
</script>

<style lang="scss" scoped>
	.loading-container {
		text-align: center;
		font-size: 38rpx;
		color: white;
		display: flex;
		flex-direction: column;
		height: 100vh;
		justify-content: center;
		align-items: center;
	}
	.container {
		display: flex;
		flex-direction: column;
		position: relative;
		min-height: 100vh;

		&::before {
			content: '';
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background: url('/static/images/homeBg.png') no-repeat center center/cover;
			z-index: -1;
		}
	}

	.top-image {
		min-height: 200px;
		height: 30vh;
		max-height: 40vh;
		width: 100%;
		overflow: hidden;
		background: rgba(0, 0, 0, 1);
		position: relative;

		.image {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 50%;
			width: 300px;
			height: 60px;
			object-fit: contain;
		}
	}

	.form-container {
		flex: 1;
		position: relative;
		background-color: #fff;
		border-top-left-radius: 60rpx;
		border-top-right-radius: 60rpx;
		margin-top: -60rpx;
		padding: 50rpx;
		box-shadow: 0 -5rpx 15rpx rgba(0, 0, 0, 0.05);
		display: flex;
		flex-direction: column;

		.formTitle {
			text-align: center;
			font-size: 16px;
			margin-bottom: 40rpx;
		}
	}

	.form-box {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.input-box {
		display: flex;
		align-items: center;
		height: 100rpx;
		border-bottom: 1rpx solid #eee;
		margin-bottom: 40rpx;
		background-color: #f5f5f5;
		border-radius: 60rpx;

		.form-text {
			padding-left: 30rpx;
			font-size: 32rpx;
		}

		.input {
			flex: 1;
			height: 100%;
			margin-left: 20rpx;
			font-size: 28rpx;
			color: #333;
		}
	}

	.placeholder {
		color: #ccc;
		font-size: 28rpx;
	}

	.forget-password {
		text-align: right;
		color: #333;
		font-size: 26rpx;
		margin-bottom: 20rpx;
	}

	.divider {
		display: flex;
		align-items: center;
		margin: 30rpx 0;

		.divider-line {
			flex: 1;
			height: 1rpx;
			background-color: #eee;
		}

		.divider-text {
			padding: 0 20rpx;
			color: #999;
			font-size: 24rpx;
		}
	}

	.login-btn {
		background: rgba(0, 0, 0, 1);
		color: #fff;
		height: 120rpx;
		line-height: 120rpx;
		border-radius: 20rpx;
		font-size: 40rpx;
		width: 100%;

		&::after {
			border: none;
		}

		&:active {
			opacity: 0.8;
		}

		&.disabled {
			background-color: #cccccc;
			opacity: 0.7;
		}
	}

	.other-login-btn image {
		width: 24px;
		height: 22px;
		margin-right: 20rpx;
	}

	.other-login-btn {
		background: #00c300;
		color: #fff;
		height: 120rpx;
		line-height: 120rpx;
		border-radius: 20rpx;
		font-size: 40rpx;
		width: 100%;
		margin-bottom: 40rpx;

		&::after {
			border: none;
		}

		&:active {
			opacity: 0.8;
		}
	}

	.agreement-box {
		margin-top: auto; // 使协议固定在底部
		padding-top: 20rpx;
		text-align: center;
	}

	.agreement-label {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
	}

	.round-checkbox {
		border-radius: 50% !important;
		transform: scale(0.8);
	}

	.agreement-text {
		color: rgba(0, 0, 0, 1);
	}

	.agreement-link {
		color: rgba(0, 0, 0, 1);
		font-weight: 600;
	}
</style>